<template>
    <div class="picture">
        <div class="center">
            <div class="wirte">
                <h3 class="buy">-购买动物世界门票-</h3>
                <div class="line-1">
                    <div><img src="https://www.hzsp.com/itemlist/images/dw1.jpg" alt=""></div>
                    <div class="in in-phone">
                        <img src="https://www.hzsp.com/itemlist/images/i/i5.jpg" alt="">
                        <h3 class="in-h">快速入园</h3>
                        <i style="color: #fff;;">——</i>
                        <p class="in-h">园区闸机检票入园或手机验证快速入园</p>
                    </div>
                    <div class="in">
                        <img src="https://www.hzsp.com/itemlist/images/i/i4.jpg?v=1.1" alt="">
                        <h3 class="in-h">畅玩动物世界</h3>
                        <i style="color: #fff;;">——</i>
                        <p class="in-h">一票看尽所有动物，畅玩所有项目</p>
                    </div>
                    <div><img src="https://www.hzsp.com/itemlist/images/dw2.jpg" alt=""></div>
                </div>
                <div class="btmP"><img src="https://www.hzsp.com/itemlist/images/line.jpg" alt=""></div>
                <router-link to="/index"><button>立即购买</button></router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.picture {
    height: 370px;
    background: url(https://www.hzsp.com/images/repeat/aa.jpg);
    display: flex;

    .center {
        display: flex;
        height: 100%;
        width: 1500px;
        margin: 0 auto;

        .beiJing {
            img {
                height: 100%;
                width: 100%;
                background-size: cover;
            }
        }

        .wirte {
            width: 100%;
            height: 80%;
            margin: 0 auto;
            margin-top: 2.5%;
            border-radius: 15px;
            background: #fff;
            overflow: hidden;

            .buy {
                font-size: 24px;
                position: relative;
                left: 620px;
                color: gray;
            }

            .line-1 {
                width: 100%;
                display: flex;
                justify-content: space-between;

                .in-phone {
                    position: relative;
                    left: -50px;
                }

                .in {
                    position: relative;
                    top: 20px;

                    .in-h {
                        position: relative;
                        bottom: 100px;
                        left: 100px;
                    }
                }
            }

            .btmP {
                position: relative;
                bottom: 20px;
            }

            button {
                position: relative;
                top: -155px;
                left: 365px;
                margin: 10px;
                font-size: 14px;
                width: 700px;
                background: #34bb63;
                height: 50px;
                border-radius: 30px;
                color: #fff;
                border: 1px;

            }
        }
    }
}
</style>
